import ConfirmModal from '@/components/ConfirmModal';
import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import { Auths } from '@/utils/typings.d';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { useRef, useState } from 'react';
import { useModel } from 'umi';
import CreateWebNavModal from './components/CreateWebNav';
import UpdateWebNavModal from './components/UpdateWebNav';
import { queryWebNavList, removeWebNav } from './service';
import type { WebNavTableListItem } from './typings.d';

const WebNavList = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const auths = currUser?.auth ? new Set(currUser.auth.webNav || []) : new Set();
  const ifCreate = auths.has(Auths.CREATE);
  const ifModify = auths.has(Auths.MODIFY);
  const ifDelete = auths.has(Auths.DELETE);
  const [currWebNav, setCurrWebNav] = useState<WebNavTableListItem | null>(null);
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<WebNavTableListItem>[] = [
    {
      title: 'id',
      hideInTable: true,
      hideInSearch: true,
      dataIndex: '_id',
    },
    {
      title: '平台名称',
      width: 120,
      dataIndex: 'platformName',
      align: 'center',
    },
    {
      title: '平台地址',
      width: 240,
      ellipsis: true,
      dataIndex: 'url',
    },
    {
      title: '平台类型',
      width: 80,
      dataIndex: 'status',
      align: 'center',
      valueEnum: {
        0: { text: '公有', status: 'success' },
        1: { text: '私有', status: 'error' },
      },
    },
    {
      title: '平台优先级',
      width: 80,
      tooltip: '最高优先级为1, 最低优先级为99, 默认为 99',
      dataIndex: 'priority',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      width: 240,
      dataIndex: 'createTime',
      align: 'center',
      hideInSearch: true,
      valueType: 'dateTime',
    },
    {
      title: '平台描述',
      dataIndex: 'description',
      width: 240,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      width: 100,
      align: 'center',
      key: 'option',
      fixed: 'right',
      valueType: 'option',
      render: (_, record, x, action) =>
        ifDelete || ifModify
          ? [
              ifModify && (
                <a
                  key={record._id + 'modify'}
                  onClick={() => {
                    setCurrWebNav(record);
                    setUpdateVisible(true);
                  }}
                >
                  编辑
                </a>
              ),
              ifDelete && (
                <ConfirmModal
                  key={record._id + 'delete'}
                  reload={() => action?.reload()}
                  operFunc={async () => await removeWebNav(record._id)}
                />
              ),
            ]
          : [<PlaceHolderCpn key={record._id} />],
    },
  ];

  return (
    <PageHeaderWrapper>
      <ProTable<WebNavTableListItem>
        rowKey="_id"
        scroll={{ x: true }}
        actionRef={actionRef}
        style={{ whiteSpace: 'nowrap' }}
        columns={columns}
        columnEmptyText="暂无数据"
        request={async (param, sort) => {
          const res = await queryWebNavList(param, sort);
          return res;
        }}
        dateFormatter="string"
        pagination={{
          showQuickJumper: true,
          defaultPageSize: 10,
          size: 'default',
        }}
        toolBarRender={(action) => [
          ifCreate && <CreateWebNavModal reload={() => action?.reload()} key="create" />,
        ]}
      />
      {updateVisible && currWebNav && (
        <UpdateWebNavModal
          visible={updateVisible}
          webInfo={currWebNav}
          setUnvisible={() => {
            setCurrWebNav(null);
            setUpdateVisible(false);
          }}
          reload={() => {
            actionRef.current?.reload();
          }}
        />
      )}
    </PageHeaderWrapper>
  );
};
export default WebNavList;
